<template>
  <div class="page-box">
    <div class="page-box-content">
      <div ref="contentRef" class="message-list">
        <ul class="message-list-box">
          <li v-for="(item, index) in messageList" :key="index" :class="['message-item', `message-${item.type}`]">
            <div class="message-item-avatar">
              <img
                  :src="item.type === 'AI'? `${boat}` : ` ${imgUrl || userImg}`"
                  alt=""/>
            </div>
            <div class="message-item-content">
              <template v-if="item.type === 'AI'">
                <v-md-preview :text="item.message" heigth="300px">
                </v-md-preview>
                <div v-if="item.title" class="message-item-content-tip">
                  <div :class="['title', item.tag === 1 ? 'tip' : '']">
                    {{ item.title }}
                  </div>
                  <ul>
                    <li v-for="(tag, index) in item.tagList" v-if="item.tag === 3"
                        :key="index" :class="['tag-list']"
                        @click="handleTagClick(tag, index)">
                      {{ tag }}
                    </li>
                  </ul>
                </div>
                <button v-if="item.isFlow"
                        style="float: right; margin-left: 10px;"
                        @click="handleFlow(item)">提交
                </button>
                <el-button v-if="item.isFlow" style="float: right; ">取消</el-button>
              </template>
              <p v-else class="message-item-content-text">{{ item.message }}</p>
            </div>

          </li>
        </ul>
        <div v-if="loading" class="loading">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
    <div class="page-box-footer">
      <div :class="['search-box']">
        <div class="search-header">
          <template v-for="t in searTypeList" :key="t.id">
            <div :class="['tag-item', { active: t.id === searTypeIndex }]" @click="handleTag(t.label, t.id)">
              {{ t.label }}
            </div>
          </template>
        </div>
        <div :class="['search-input', { focused: isFocused }]">
          <!--          <div class="search-content">{{ searchQuery }}</div>-->
          <div class="textarea-wrap">
            <textarea
                ref="textareaRef"
                v-model.trim="searchQuery"
                :style="{height: textareaHeight}"
                class="input" placeholder="请输入内容"
                @blur="isFocused = false"
                @focus="isFocused = true" @keyup.enter.native="handleSearch">
          </textarea>
          </div>
          <div
              v-loading="loading"
              :class="['search-button', {'search-button-disabled': loading }]"
              @click="handleSearch"
          >
          </div>
        </div>
        <!--        <div class="search-footer">-->
        <!--          <div v-loading="loading"-->
        <!--               :class="['search-button', {'search-button-disabled': loading }]"-->
        <!--               @click="handleSearch">-->
        <!--          </div>-->
        <!--        </div>-->
      </div>
    </div>
  </div>
</template>


<script setup>
import {ref, watch, reactive, onMounted, computed, nextTick} from 'vue'
import useMessage from '@/store/message'
import calcTextareaHeight from '@/utils/calcTextareaHeight.js'

const msgStore = useMessage()

const messageList = computed(() => msgStore.messageList)
const loading = computed(() => msgStore.loading)

import boat from '@/assets/images/zhulong_ai.jpg'
import userImg from '@/assets/images/icon_avatar_user.png'

const searTypeList = ref([
  {
    id: 3,
    label: '知识问答'
  },
  {
    id: 1,
    label: '出差申请'
  }
])


const isFocused = ref(false)
const searTypeIndex = ref(3) //  搜索类型
const currentIndex = ref(-1) // 快捷问答文本索引
const searchQuery = ref('')
const textareaRef = ref(null)
const contentRef = ref(null)
const textareaHeight = ref('24px')
// 输入框高度
const getHeight = () => {
  textareaHeight.value = calcTextareaHeight(textareaRef.value, 1, null, searchQuery.value).height
}
// 滚动到底部
const scrollToBottom = () => {
  nextTick(() => {
    contentRef.value.scrollTop = contentRef.value.scrollHeight - contentRef.value.offsetHeight
  })
}

watch(() => searchQuery.value, (val) => {
  getHeight()
})

watch(() => loading.value, () => {
  scrollToBottom()
})

onMounted(() => {
  msgStore.initWebSocket(scrollToBottom)
  scrollToBottom()
})

/**
 * @description: 点击快捷问答
 * @param tag 文本
 * @param index 索引
 */
const handleTagClick = (tag, index) => {
  currentIndex.value = index
  msgStore.sendMessage(tag, scrollToBottom)

}

/**
 * @description:  点击搜索类型
 */
const handleTag = (label, id) => {
  searTypeIndex.value = id
  msgStore.setSearchType(id)
}

/**
 * @description: 查询
 */
const handleSearch = () => {
  if (searchQuery.value && !loading.value) {
    msgStore.sendMessage(searchQuery.value, scrollToBottom)
    searchQuery.value = ""
  }
}

// 表单提交
const handleFlow = (item) => {
  const target = import.meta.env.VUE_APP_DEPARTMENT_AI_PATH
  window.parent.postMessage(JSON.stringify(item.pageArgs), target);
  window.open(`${target}/flowServe/flowStart?flowId=f7a278a74d1fe6f7872f7c987e0b0757&refer=chat_page`)
}


</script>


<style lang="scss" scoped>
@import url('./index.scss');
</style>
